<template>
  <h3 style="margin-bottom: 20px">菜品查询</h3>
  <el-table :data="cuisinesRef"
            border
            style="width: 70vw;margin-top: 20px"
  >
    <el-table-column type="index" width="50"/>
    <el-table-column prop="name" label="姓名"/>
    <el-table-column prop="price" label="价格"/>
    <el-table-column prop="description" label="描述"/>
    <el-table-column label="图片展示">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-image :src="scope.row.imgBase64"/>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {listCuisinesApi} from "../../api";

let cuisinesRef = ref(null)
onMounted(async () => {
  let cuisines = await (await listCuisinesApi()).json()
  cuisinesRef.value = cuisines.data
})

function imgFormatter(e) {
  console.log(e)
  let img = e.imgBase64
  return `<img src="${img}" style="width: 100px; height: 100px;" alt="img"/>`
}
</script>

<style scoped>
.my-label {
  vertical-align: center;
  margin-right: 10px;
  margin-top: 5px;
}

.my-input {
  margin-right: 30px;
}
</style>